<template>
  <el-card shadow="never" class="statistics-header">
    <div>活动名称：{{ state.activity_name }}</div>
    <div>创建人：{{ state.created_user }}</div>
    <div>创建时间：{{ state.created_at }}</div>
    <div v-if="state.period_type == 1">有效期：永久</div>
    <div v-else>
      有效期：{{ state.begin_date }} 至
      {{ state.end_date }}
    </div>
    <div>
      状态：<span :style="{ color: StatusColor(state.activity_status) }">
        {{ state.activity_status }}
      </span>
    </div>
    <div v-if="state.activity_status == '提前结束'">提前结束时间：{{ state.real_end_date }}</div>
  </el-card>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { StatusColor } from '@/utils/smartMarketing'
  const state = ref({
    activity_name: '',
    activity_status: '',
    period_type: 1,
    begin_date: '',
    end_date: '',
    created_at: '',
    real_end_date: '',
    created_user: ''
  })
  defineExpose({
    state
  })
</script>
//
<style lang="scss" scoped>
  .statistics-header {
    font-size: 14px;
    color: #33302d;
    margin-bottom: 16px;
    :deep .el-card__body {
      display: flex;
      justify-content: space-between;
    }
  }
</style>
